<template>
  <div class="businfo">
    <div v-for="(station, index) in stationList" :key="station.stationNo"  @click="checkedStation = index" class="station" :class="{'checked-station': index === checkedStation}">
      <div class="station-line"><span class="station-ball" :class="{'station-ball-on': station.busInfo.length, 'station-ball-off': station.busInfo.length === 0, 'station-ball-check': index === checkedStation, 'station-ball-arrived': station.busInfo.length && station.busInfo.slice(-1)[0].arrived}"></span></div>
      <div :class="{'station-name-on': station.busInfo.length, 'station-name-off': !station.busInfo.length, 'station-name-check': index === checkedStation&&index>0}">{{station.stationName}} <span v-if="station.stationNo === -1" class="lastStation">（返程）</span></div>
      <div class="bus" v-if="station.busInfo.length">
        —
        <span>{{station.busInfo.slice(-1)[0].busName}} {{station.busInfo.length===1?"":"等"+station.busInfo.length+"辆车"}}</span>
        <span v-if="index > checkedStation&&index>0">{{station.busInfo.slice(-1)[0].arrived?'到站':"约"+calTime(station.busInfo[0].distance) +"秒到站"}}</span>
        <span v-else-if="index <= checkedStation">{{'距离'+(checkedStation-index)+'站约'}}{{calTime(calDistance(index, checkedStation))+'秒'}}</span>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, PropType, ref } from 'vue'


interface Ibus {
  busName: string;
  busLng: number;
  busLat: number;
  distance: number;
  arrived: boolean;
}

export interface IbusStation {
  stationId: number;
  lng: number;
  lat: number;
  stationName: string;
  stationNo: number;
  lineNo: number;
  stationDistance: number;
  busInfo: Ibus[];
}

export default defineComponent({
  name: 'BusInfo',
  props: {
    stationList: {
      type: Array as PropType<IbusStation[]>,
      required: true
    }
  },
  setup (props) {
    const checkedStation = ref(0)
    const calDistance = function(busIndex: number, stationIndex: number): number{
      if (busIndex > stationIndex) {
        return -1
      }else{
        let distance = props.stationList[busIndex].busInfo[0].distance
        // console.log(distance)
        for (let i = 0; i < (stationIndex-busIndex); i++) {
          distance += props.stationList[busIndex+i].stationDistance
          // console.log(distance)
        }
        return Math.round(distance)
      }
    }
    const calTime = function(distance: number): string{
      return Math.round(distance/15).toString()
    }
    return { checkedStation, calDistance, calTime }
  }
})
</script>
<style scoped>
.businfo {
  position: relative;
  margin-top: 10px;
}
.station {
  position: relative;
  padding-left: 10px;
  line-height: 1.5em;
}
.checked-station {
  background-color: #f1f1f1;
}
.station-line {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
}
.station-line::before {
  content: " ";
  position: relative;
  width: 2px;
  height: 100%;
  display: block;
  background-color: #e3e3e3;
  margin: 0 auto;
  top: 0;
}
.station-ball {
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  background-color: #fff;
  left: 50%;
  transition: top 0.2s ease-in-out;
  transform: translate(-50%, 0px);
}
.station-name-on {
  font-size: 1.2rem;
  display: inline-block;
  color: #e83015;
}
.station-name-off {
  color: #666;
}
.station-ball-on {
  top: 5px;
  border: 2px solid #e83015;
  width: 10px;
  height: 10px;
}
.station-ball-off {
  top: 8px;
  width: 6px;
  height: 6px;
  border: 1px solid #666;
}
.station-ball-check {
  border: 2px solid green;
  top: 5px;
  width: 10px;
  height: 10px;
}
.station-ball-arrived {
  background-color: #e83015;
}
.lastStation,
.bus {
  display: inline-block;
  color: #00aa90;
}
</style>